<template>
<div>
  <header class="header clearfix" :style="{background:topBackParams.bgColor,position:topBackParams.position}">
    <section class="header-center fl" :style="{fontSize:topBackParams.titleSize,color:topBackParams.titleColor,fontWeight:topBackParams.fontWeight}">{{topBackParams.headerTitle}}</section>
    <section class="header-right fl"></section>
  </header>
</div>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  name: 'TopBack',
  props: {
    topBackParams: {
      type: Object,
      default() {
        return {
          headerTitle: '',
          bgColor: '#fff',
          position: 'relative',
          titleSize: '16px',
          titleColor: '#333',
          backLink: ''
        }
      }
    }
  },
  data() {
    return {
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin.scss';
  .header{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align:center;
    background: #F8F8F8;
    z-index: 3;
    .header-left{
      // width:15%;
      display: none;
      text-align: center;
      .icon{
        width:38px;
        height: 38px;
        vertical-align: -12px;
      }
    }
    .header-center{
      width: 100%;
      font-size: 38px;
      color:#333;
    }
  }
</style>
